---
import "../styles/global.css";

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="zh-hans" class="bg-[var(--page-bg)]">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="generator" content="{Astro.generator}" />
    <title>{title}</title>
    <script is:inline>
      const setTheme = () => {
        const theme = (() => {
          if (
            typeof localStorage !== "undefined" &&
            localStorage.getItem("theme")
          ) {
            return localStorage.getItem("theme");
          }
          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
            return "dark";
          }
          return "light";
        })();
        if (theme === "light") {
          document.documentElement.setAttribute("data-theme", "light");
        } else {
          document.documentElement.setAttribute("data-theme", "dark");
        }
        setTheme();
        window.addEventListener("astro:after-swap", setTheme);
      };
    </script>
  </head>
  <body>
    <div
      id="page"
      class="flex min-h-screen overflow-hidden rounded-md text-[var(--text)] md:mx-10 md:mt-14"
    >
      <div class="hidden min-w-64 bg-[var(--side-bg)] md:block">Left</div>
      <div class="w-full flex-1 bg-[var(--content-bg)] pb-20">
        <slot />
      </div>
      <div class="hidden min-w-64 bg-[var(--side-bg)] xl:block">Right</div>
    </div>
  </body>
</html>
